<template>
  <div class="war" data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
    <!-- preloader section -->
    <!-- <div class="preloader">
      <div class="sk-spinner sk-spinner-rotating-plane"></div>
    </div>-->
    <!-- header -->
    <section id="home">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <h1 class="wow animated bounceInDown rotate">芝麻小程序</h1>
            <h2 class="wow animated bounce">北京芝麻众创科技</h2>
            <a href="#intro" class="btn btn-default smoothScroll">点击了解更多</a>
            <router-link
              to="/Login"
              class="btn btn-default smoothScroll"
              style="margin-left:10px;"
            >登录/注册</router-link>
          </div>
        </div>
      </div>
    </section>
    <!--  -->
    <div class="navbar navbar-default navbar-expand-lg bg-light" :class="lo==true?'fixed-top':''" style="background:#fff;">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">
            <img style="width: 170px;height:45px;" src="../assets/images/logo.png" alt>
          </a>
        </div>
        <button
          class="navbar-toggle"
          data-toggle="collapse"
          data-target=".navbar-collapse"
          style="background:#fff;"
          v-if="btna"
        >
          <span class="el-icon-s-operation" style="background:#fff;font-size:30px;color:#eb5424;"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#home" class="smoothScroll wc">主页</a>
            </li>
            <li>
              <a href="#intro" class="smoothScroll">关于小程序</a>
            </li>
            <li>
              <a href="#work" class="smoothScroll">设计领域</a>
            </li>
            <li>
              <a href="#team" class="smoothScroll">新闻中心</a>
            </li>
            <li>
              <a href="#portfolio" class="smoothScroll">芝麻功能</a>
            </li>
            <li>
              <a href="#price" class="smoothScroll">芝麻模板</a>
            </li>
            <li>
              <a href="#contact" class="smoothScroll">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- intro -->
    <section id="intro">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 title">
            <h4>芝麻小程序</h4>
            <h2>芝麻小程序平台全面覆盖社会需求</h2>
            <hr>
            <p>互联网时代经济形势急剧变化，由此也带来了众多的商机，面对纷繁复杂的局面，怎么才能立于不败之地呢?微信是现代社交类平台的翘楚，由此衍生出的商业形态也多不胜数。而近，随着微信大改版，新推出的小程序功能成了对微信商业功能的有效延伸。那么微信小程序在商业上的魅力和能量到底有多大呢?跟着芝麻小程序来了解一下吧。</p>
          </div>
        </div>
      </div>
    </section>
    <!-- work -->
    <section id="work">
      <div>
        <div class="row">
          <div class="col-md-4 col-sm-4 title">
            <h2>与众不同的</h2>
            <h2>业务功能</h2>
            <hr>
            <p>教育等</p>
          </div>
          <div class="d-flex flex-wrap col-md-8 col-sm-8 bc">
            <div class="col-md-6 col-sm-6 bg-black ba">
              <i class="fa fa-mobile"></i>
              <h3>无需下载</h3>
            </div>
            <div class="col-md-6 col-sm-6 bg-red ba">
              <i class="fa fa-cloud"></i>
              <h3>云端存储</h3>
            </div>
            <div class="col-md-6 col-sm-6 bg-red ba">
              <i class="fa fa-link"></i>
              <h3>行业链条</h3>
            </div>
            <div class="col-md-6 col-sm-6 bg-black ba">
              <i class="fa fa-globe"></i>
              <h3>9亿资源</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- team -->
    <section id="team">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-3 col-md-10 col-sm-offset-1 col-sm-8 title">
            <h2>芝麻小程序新动态</h2>
            <hr>
          </div>
          <div class="col-md-4 col-sm-6 animated wow fadeIn" data-wow-delay="0.9s">
            <div class="team-des">
              <h4>小程序动态</h4>
            </div>
            <ul class="wirte">
              <li>
                <a href="#">实体店做小程序真的能获利吗</a>
              </li>
              <li>
                <a href="#">小程序的运营套路与方法</a>
              </li>
              <li>
                <a href="#">生活服务类小程序的市场前景怎么样</a>
              </li>
              <li>
                <a href="#">微信小程序市场竟有多大？</a>
              </li>
            </ul>
          </div>
          <div class="col-md-4 col-sm-6 animated wow fadeIn" data-wow-delay="1.3s">
            <div class="team-des">
              <h4>小程序代理</h4>
            </div>
            <ul class="wirte">
              <li>
                <a href="#">听说小程序挺火，做小程序代理怎么样？</a>
              </li>
              <li>
                <a href="#">小程序的发展势不可挡，2019创业是你的首选！</a>
              </li>
              <li>
                <a href="#">微信小程序代理你真的了解吗？</a>
              </li>
              <li>
                <a href="#">小程序创业很难吗？有没有好的公司助创业的？</a>
              </li>
            </ul>
          </div>
          <div class="col-md-4 col-sm-6 animated wow fadeIn" data-wow-delay="1.6s">
            <div class="team-des">
              <h4>行业资讯</h4>
            </div>
            <ul class="wirte">
              <li>
                <a href="#">段段时间小程序数量翻两倍是为什么</a>
              </li>
              <li>
                <a href="#">微信小程序对于餐饮行业的意义有哪些</a>
              </li>
              <li>
                <a href="#">餐饮小程序怎么引流</a>
              </li>
              <li>
                <a href="#">餐饮业小程序解决方案</a>
              </li>
              <li>
                <a href="#">电商行业如何玩转微信小程序？</a>
              </li>
              <li>
                <a href="#">微信小程序，现在活的更像手机桌面</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- portfolio section -->
    <div id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 title">
            <h2>带您走向行业巅峰</h2>
            <hr>
            <p>为不同商家定制属于自己小程序平台，让商家使用小程序得心应手，更具吸引力和实用性。</p>
          </div>
          <div class="col-md-12 col-sm-12"></div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.4s">
            <div class="ck">
              <img src="../assets/images/shangwu.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">商业平台</p>
                <p
                  class="p2"
                >小程序为商家制作一款属于自己的小程序，摆脱平台的高额抽佣和严苛条款，从点餐到配送，让顾客在自己的外卖系统下单，多种营销玩法轻松拓客，获取单量。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.5s">
            <div class="ck">
              <img src="../assets/images/lvyou.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">旅游行业</p>
                <p class="p2">小程序针对旅游应用场景推出手机、PC共同管理，以及独具特色文章功能系统。为旅游行业客户提供高效的特色推荐功能，多样助力旅游行业客户快速发展。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.6s">
            <div class="ck">
              <img src="../assets/images/shenghuo.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">生活服务</p>
                <p class="p2">小程序家政行业，对日常保洁，涵盖餐具清洁、空间整理、衣物洗晾等服务内容进行深度挖掘，追求极致的细节，满足顾客需求。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.7s">
            <div class="ck">
              <img src="../assets/images/qiche.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">汽车行业</p>
                <p
                  class="p2"
                >小程序为汽车行业商户提供高性能的专业数据统计工具分析。为用户提供便捷测评、车友圈等人性化服务，商家实现线上线下融合升级，将被动的DMS数据信息客户管理转变成互动互联的互联网模式</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.8s">
            <div class="ck">
              <img src="../assets/images/jiaoyu.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">教育行业</p>
                <p
                  class="p2"
                >小程序帮助教育培训行业完成B2C授课形式的不断进化，从录播到直播，从班课到1对1，将产品和服务互联网化，适应用户的碎片化时间使用需求，同时兼容现有的线下授课模式。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="0.9s">
            <div class="ck">
              <img src="../assets/images/shangye.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">业务平台</p>
                <p
                  class="p2"
                >小程序将资源聚合以全新的形式提供资讯服务，以留言功能、互动反馈、美化版面，增强新闻报道可读性，探索用户聚焦点，为媒体深度融合打造新的传播平台。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="1s">
            <div class="ck">
              <img src="../assets/images/canyin.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">餐饮行业</p>
                <p class="p2">小程序为商家提供一站式解决方案，凭借到店、扫码下单、外卖等功能，以及积分系统搭建、可视化后台数据管理等强大的技术支持。拓展店铺营销的新渠道。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-3 animated wow fadeIn boxImg" data-wow-delay="1.1s">
            <div class="ck">
              <img src="../assets/images/dichan.jpg" alt="portfolio img">
              <div class="boxBlock">
                <p class="p1">地产商业</p>
                <p class="p2">小程序为房产开发商及经济公司提供多渠道营销解决方案及销售管理工具，有效提高推广效率，高效管理客户资源，轻松掌握客户状态，助力转化。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- price section -->
    <div id="price">
      <div class="container">
        <div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 title" style="margin:0 auto;">
          <h2>芝麻模板</h2>
          <hr>
          <p>为商家提供模板供商家参考使用。</p>
        </div>
        <div class="bc">
          <div class="col-md-4 col-sm-6">
            <div class="plan wow bounceIn" data-wow-delay="0.3s">
              <div class="plan_title">
                <h3>个体模板</h3>
              </div>
              <div class="plan_sub_title">
                <h2>$ 25</h2>
                <small>Per month</small>
              </div>
              <ul>
                <li>5 ACCOUNTS</li>
                <li>20 GB SPACE</li>
                <li>20 BASIC THEMES</li>
              </ul>
              <button class="btn btn-warning">Get started</button>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="plan wow bounceIn" data-wow-delay="0.6s">
              <div class="plan_title">
                <h3>商家模板</h3>
              </div>
              <div class="plan_sub_title">
                <h2>$ 50</h2>
                <small>per month</small>
              </div>
              <ul>
                <li>10 ACCOUNTS</li>
                <li>50 GB SPACE</li>
                <li>30 PRO THEMES</li>
              </ul>
              <button class="btn btn-warning">Get started</button>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="plan wow bounceIn" data-wow-delay="0.9s">
              <div class="plan_title">
                <h3>企业模板</h3>
              </div>
              <div class="plan_sub_title">
                <h2>$ 75</h2>
                <small>per month</small>
              </div>
              <ul>
                <li>20 ACCOUNTS</li>
                <li>100 GB SPACE</li>
                <li>60 PRO THEMES</li>
              </ul>
              <button class="btn btn-warning">Get started</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- contact section -->
    <section id="contact">
      <div class="container">
        <div>
          <div
            class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 title"
            style="margin:0 auto;"
          >
            <h2>联系我们</h2>
            <hr>
            <p>如有：问题咨询、商务合作、意见建议，您可以通过留言提出，我们会在第一时间给出回复。</p>
          </div>
          <div
            class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 contact-form wow fadeInUp"
            data-wow-delay="0.5s"
            style="margin:0 auto;"
          >
            <form action="/addLy.action" method="post">
              <input name="nam.action" type="text" class="form-control" placeholder="姓名">
              <input name="email.action" type="email" class="form-control" placeholder="电子邮箱">
              <textarea name="text.action" class="form-control" placeholder="留言内容......" rows="6"></textarea>
              <button
                type="submit.action"
                class="form-control"
                style="background:#eb5424;color:#fff;height:60px;"
              >提交</button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <addFootera></addFootera>
  </div>
</template>
<script src="/js/wow.min.js"></script>

<script>
import $ from "jquery";
import "bootstrap";
import addFootera from "./Footera";
import { WOW } from "wowjs";
$(function() {
  $(document).ready(function() {
    $("a").click(function() {
      $(this)
        .addClass(".aa")
        .siblings()
        .removeClass(".aa");
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var $target = $(this.hash);
        $target = ($target.length && $target) || $(this.hash.slice(1));
        if ($target.length) {
          var targetOffset = $target.offset().top;
          $("html,body").animate(
            {
              scrollTop: targetOffset
            },
            500
          );
          console.log(targetOffset);
          return false;
        }
      }
    });
  });
  // mouseover
  $(".ck").mouseover(function() {
    $(this)
      .find(".boxBlock")
      .css({
        transition: ".3s all",
        height: "100%",
        "background-color": "rgba(0,0,0,.7)",
        color: "transparent"
      });
    $(this)
      .find(".p1")
      .css("display", "none");
    $(this)
      .find(".p2")
      .css({
        transition: "1s all",
        display: "block",
        color: "#fff"
      });
  });
  $(".ck").mouseout(function() {
    $(this)
      .find(".boxBlock")
      .css({
        transition: "1s all",
        height: "20%",
        "background-color": "rgba(0,0,0,.5)",
        color: "#fff"
      });
    $(this)
      .find(".p1")
      .css("display", "block");
    $(this)
      .find(".p2")
      .css({
        display: "none"
      });
  });
});
export default {
  name: "war",
  data() {
    return {
      lo: false,
      curHeight: 0,
      btna: false
    };
  },
  components: {
    addFootera
  },
  mounted() {
    // wow.js
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 0,
      mobile: true
    });
    wow.init();
    // 滚动
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(window.innerHeight)
      if (scrollTop > window.innerHeight) {
        this.lo = true;
      } else {
        this.lo = false;
      }
    },
    wid() {
if (window.innerWidth > 1000) {
        this.btna = false;
      } else {
        this.btna = true;
      }
    }
  },
  created() {
    // window.onresize = function() {
    //   if (window.innerWidth > 1000) {
    //     this.btna = false;
    //   } else {
    //     this.btna = true;
    //   }
    // };
    this.wid()
  },
  watch: {},
  beforeCreate() {
    $(".preloader").fadeOut("slow");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.war {
  background: #f8f8f8;
  color: #606060;
  font-family: "Proxima", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-align: center;
  vertical-align: middle;
}

.title {
  padding-bottom: 40px;
}
@media screen and (max-width: 750px) {
  h2 {
    font-size: 36px;
  }
}
@media screen and (min-width: 750px) {
  .wid_cont {
    /* left: 15px !important; */
    width: 67.666% !important;
  }

  .wid_max_left {
    width: 50.4% !important;
  }

  .wid_min_left {
    width: 49.6% !important;
  }

  .wid_r {
    width: 32.333% !important;
  }
}
@media only screen and (min-width: 375px) and (max-width: 767px) {
  .navbar {
    top: 0px !important;
  }
}
.title h2 {
  color: #202020;
  line-height: 50px;
  padding-bottom: 30px;
}
.title p {
  padding-top: 14px;
  padding-bottom: 30px;
}

.parallax-section {
  background-attachment: fixed !important;
  background-size: cover !important;
}
.copyrights {
  text-indent: -9999px;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: none repeat scroll 0 0 #fff;
  background: none repeat scroll 0 0 #f9f9f9;
}
.sk-spinner-rotating-plane.sk-spinner {
  width: 40px;
  height: 40px;
  background-color: #eb5424;
  border-radius: 50%;
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
  animation: sk-rotatePlane 1.2s infinite ease-in-out;
}
@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
#home {
  background: url("../assets/images/home-bg.jpg") 50% 0 repeat-y fixed;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}
#home h2 {
  letter-spacing: 2px;
}

#home .btn {
  background: #eb5424;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  font-size: 16px;
  padding: 20px 40px;
  margin-top: 60px;
}
#home .btn:hover {
  background: #fff;
  color: #eb5424;
  transition: all 0.4s ease-in-out;
}
/* navigation section */
.navbar-default {
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(50, 50, 50, 0.04);
  margin: 0 !important;
}
.navbar-default .navbar-brand {
  font-size: 40px;
  font-weight: bold;
  margin: 0;
  line-height: 40px !important;
}
.navbar-default .navbar-nav li a {
  color: #606060;
  font-weight: bold;
  padding-right: 20px;
  padding-left: 20px;
  line-height: 40px;
}
.navbar-default .navbar-nav li a:hover {
  color: #eb5424;
}
.navbar-default .navbar-nav li a:focus {
  color: #eb5424;
}
.navbar-default .navbar-toggle {
  border: none;
  padding-top: 12px;
}

.navbar-default .navbar-toggle .icon-bar {
  background: #eb5424;
  border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
/* intro section */
#intro {
  padding-top: 180px;
  padding-bottom: 140px;
}

#intro h4 {
  padding-bottom: 16px;
}
.row .title {
  margin: 0 auto;
  /* border:1px solid red; */
}
/* work */
#work {
  background-color: #ffffff;
}

/* #work .bc {
  display: flex;
  flex-wrap: wrap; 
} */
.bc {
  display: flex;
  flex-wrap: wrap;
}
#work .title {
  padding: 100px 60px 60px 60px;
}

#work .bg-black {
  background-color: #303030;
  color: #ffffff;
}

#work .bg-red {
  background-color: #eb5424;
  color: #ffffff;
}

#work h3 {
  padding-bottom: 60px;
}

#work .fa {
  color: #ffffff;
  cursor: pointer;
  font-size: 40px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  transition: all 0.4s ease-in-out;
  margin-top: 40px;
}

#work .ba:hover .fa {
  background-color: #ffffff;
  border-radius: 50%;
  color: #303030;
}
/* team section */
#team {
  background: #202020 url("../assets/images/team-bg.jpg") 50% 0 repeat-y fixed;
  color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

#team h2 {
  color: #ffffff;
}

#team h3 {
  font-size: 20px;
  line-height: 10px;
}

#team h4 {
  color: #202020;
  line-height: 10px;
  font-weight: bold;
}

#team .team-des {
  background-color: #eb5424;

  padding: 20px 12px;
  position: relative;
}
#team .team-des h4 {
  color: #fff;
}
#team img {
  max-width: 100%;
  height: auto;
  padding-top: 60px;
}
/* portfolio section */
#portfolio {
  padding-top: 100px;
  padding-bottom: 100px;
}

#portfolio h3 {
  color: #eb5424;
  padding-bottom: 60px;
}

#portfolio a {
  text-decoration: none;
}

#portfolio img {
  border-radius: 1px;
  width: 100%;
  max-width: 100%;
  height: auto;
  transition: all 0.4s ease-in-out;
}
.wirte {
  background-color: #ccc;
  opacity: 0.8;
  padding-bottom: 10px;
}
.wirte li {
  text-align: left;
  font-size: 20px;
  padding: 5px 0px;
  border-bottom: 1px solid #fff;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 15px;
}
.wirte li a {
  color: black;
}
.wirte li a:hover {
  color: #eb5424;
}
/* price section */
#price {
  background: #fff;
  padding-top: 100px;
  padding-bottom: 120px;
}

#price .plan {
  background: #eb5424;
  color: #ffffff;
  padding: 0 0 60px 0;
}

#price .plan .plan_title {
  background-color: #f6f6f6;
  color: #202020;
  padding-top: 40px;
  padding-bottom: 40px;
}

#price .plan .plan_sub_title {
  border-bottom: 1px solid #ffffff;
  padding: 30px;
}

#price .plan ul {
  padding: 0;
}

#price .plan ul li {
  display: block;
  font-family: "Proxima";
  font-size: 16px;
  padding: 40px 0 10px 0;
}

#price .plan .btn {
  background: #ffffff;
  border: none;
  border-radius: 0;
  color: #202020;
  font-size: 16px;
  font-weight: bold;
  padding: 20px 40px;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}

#price .plan .btn:hover {
  background: #202020;
  color: #ffffff;
}
/* contact section */
#contact {
  background: #f6f6f6 url("../assets/images/contact-bg.jpg") 50% 0 repeat-y
    fixed;
  color: #ffffff;
  padding-top: 100px;
  padding-bottom: 80px;
}

#contact h2 {
  color: #ffffff;
}

#contact .form-control {
  border-radius: 4px;
  border: none;
  box-shadow: none;
  margin-top: 12px;
  margin-bottom: 14px;
}

#contact input {
  height: 50px;
}

#contact input[type="submit"] {
  background-color: #eb5424;
  color: #ffffff;
  height: 60px;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
}

#contact input[type="submit"]:hover {
  background-color: #202020;
}
/* wlock */
.boxImg {
  margin-bottom: 34px;
  position: relative;
  padding-left: 15px;
  padding-right: 15px; /*margin-left: 15px;margin-right: 15px;*/
}
.boxBlock {
  height: 20%;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}
.ck {
  cursor: pointer;
}
.p1 {
  margin: 0;
}
.p2 {
  display: none;
  color: #000;
  font-size: 15px;
  margin-top: 30px;
}
/*news*/
#team ul li {
  text-align: left;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.9);
}
#team ul li:hover {
  color: #eb5424;
}
#team h4 {
  color: #fff;
}
#team ul a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  font-size: 20px;
  line-height: 40px;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
#team ul a:hover {
  color: #eb5424;
}
</style>
